<template>
  <div>
    <myheader :style="{ backgroundColor: bgc, color: mycolor }" />
    <div id="goods">
      <mygoods
        v-for="(item, index) in list"
        :key="item.id"
        :stuff="list[index]"
      />
    </div>
    <myfooter :list="list" />
  </div>
</template>

<script>
import myheader from "./components/Header";
import mygoods from "./components/Goods";
import myfooter from "./components/Footer";
export default {
  components: {
    myheader,
    mygoods,
    myfooter,
  },
  data() {
    return {
      list: [],
      colorinfo: {
        r: Math.floor(Math.random() * 256),
        g: Math.floor(Math.random() * 256),
        b: Math.floor(Math.random() * 256),
      },
    };
  },
  computed: {
    bgc() {
      return `rgb(${this.colorinfo.r},${this.colorinfo.g},${this.colorinfo.b})`;
    },
    mycolor() {
      return `rgb(${255 - this.colorinfo.r},${255 - this.colorinfo.g},${
        255 - this.colorinfo.b
      })`;
    },
  },
  created() {
    this.$axios({ url: "https://www.escook.cn/api/cart" }).then(
      (res) => (this.list = res.data.list)
    );
    this.$bus.$on("del", (id) =>
      this.list.splice(
        this.list.findIndex((item) => item.id === id),
        1
      )
    );
  },
};
</script>

<style>
#goods {
  padding: 50px;
}
</style>
